<template>
  <div>
    <van-nav-bar border fixed placeholder  title="商品评价列表" left-arrow @click-left="$router.go(-1)" />
    <div class="filter">
      <van-tag plain type="warning" size="large" @click="filterComments(-1)">全部({{ total }})</van-tag>
      <van-tag type="success" size="large" @click="filterComments(10)">好评({{ countNum.praise }})</van-tag>
      <van-tag type="primary" size="large" @click="filterComments(20)">中评({{ countNum.review }})</van-tag>
      <van-tag type="danger" size="large" @click="filterComments(30)">差评({{ countNum.negative }})</van-tag>
    </div>
    <!-- 商品评价 -->
    <div class="comment" v-if="total > 0">
      <div class="comment-list">
        <div class="comment-item" v-for="item in list" :key="item.comment_i">
          <div class="top">
            <img :src="item.user.avatar_url ?? avatar" alt="">
            <div class="name">{{ item.user.nick_name }}</div>
            <van-rate :size="16" :value="5" color="#ffd21e" void-icon="star" void-color="#eee" />
          </div>
          <div class="content">
            {{ item.content }}
          </div>
          <div class="time">
            {{ item.create_time }}
          </div>
        </div>
      </div>
      <van-pagination v-model="page" :total-items="total" :items-per-page="perPage" mode="simple" />
    </div>
  </div>
</template>
<script>
import { getComments, getCommentsTotal } from '@/api/goods'
import defaultAvatar from '@/assets/default-avatar.png'
export default {
  name: 'CommentIndex',
  data () {
    return {
      scoreType: -1, // -1 全部 10 好评 20 中评 30 差评
      page: 1,
      total: 0,
      perPage: 10,
      list: [],
      // 默认头像
      avatar: defaultAvatar,
      // 评价总数
      countNum: {}
    }
  },
  computed: {
    goodsId () {
      return this.$route.query.goods_id
    }
  },
  created () {
    this.getComments()
    this.getNums()
  },
  watch: {
    page () {
      this.getComments()
    }
  },
  methods: {
    async getComments () {
      const { data: { list } } = await getComments(this.scoreType, this.goodsId, this.page)
      this.total = list.total
      this.perPage = list.per_page
      this.list = list.data
    },
    async getNums () {
      const { data: { total } } = await getCommentsTotal(this.goodsId)
      this.countNum = total
    },
    filterComments (type) {
      this.scoreType = type
      this.page = 1
      this.getComments()
    }
  }
}
</script>
<style lang="less" scoped>
.filter{
  display: flex;
  margin-top: 30px;
  span {
    margin: 5px;
  }
}
.comment {
  padding: 10px;

  .comment-item {
    font-size: 16px;
    line-height: 30px;

    .top {
      height: 30px;
      display: flex;
      align-items: center;
      margin-top: 20px;

      img {
        width: 20px;
        height: 20px;
      }

      .name {
        margin: 0 10px;
      }
    }
    .content{
      overflow: hidden;
    }
    .time {
      color: #999;
    }
  }
}
</style>
